<!-- 实例运行监控 第三版本 -->
<template>
  <div id="div" class="app-container realtime">
    <div
      class="dagbox"
      :style="{ height: boxHeight }"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <div class="plr32 mbshadow">
        <el-form
          :model="formData1"
          ref="formData1"
          size="small"
          :inline="true"
          label-width="100px"
          class="formbox"
        >
          <el-form-item label="时间:">
            <el-date-picker
              v-model="formData1.time"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="领域">
            <el-select
              v-model="formData1.projectCode"
              placeholder="请选择领域"
              @change="handleStreamId"
            >
              <el-option
                v-for="(item, index) in formData1.DagDomains"
                :label="item.projectName"
                :value="item.projectCode"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作流">
            <el-select v-model="formData1.streamId" placeholder="请选择工作流">
              <el-option
                v-for="item in formData1.projectOption"
                :label="item.streamName"
                :value="item.streamId"
                :key="item.streamId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              v-throttle="1"
              @click="handleSearch"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              v-throttle="1"
              @click="resetQuery1"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <v-dag :mockData="mockData" :isShow="true" @loadMore="getTasklist" />
      <div
        class="menu"
        v-show="isShowRightMenu"
        :style="{ left: devInfo.left, top: devInfo.top }"
      >
        <ul>
          <li @click="mainStreamDetails">主流明细</li>
          <li @click="ndoeTrend">节点运行趋势</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <transition name="slide-fade">
        <div class="chartDate" v-if="ndoeTrendChartShow">
          <Title class="titlemg" :title="'节点历史运行'" :isIconShow="false" />
          <div
            class="close el-icon-arrow-down"
            @click="ndoeTrendChartShow = false"
          ></div>
          <div class="mg12">
            <chart
              style="width: 100%; height: 420px"
              :chart-data="lineChartData"
              :loading="loading"
            />
          </div>
        </div>
      </transition>
    </div>
    <!-- 状态弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isDialogShow" width="80%">
      <el-form
        :model="fromDate"
        ref="fromDate"
        size="small"
        :inline="true"
        class="bg32"
        v-if="isShowSearch"
      >
        <el-form-item label="任务名称:" prop="taskName">
          <el-input
            placeholder="请输入任务名称"
            v-model="fromDate.taskName"
            @input="handleQuery"
            clearable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div v-show="dialogTable === 'wxrhjk'">
        <el-table
          v-loading="wxrhjk.loading"
          :data="
            wxrhjk.data.slice(
              (wxrhjk.pageNum - 1) * wxrhjk.pageSize,
              wxrhjk.pageNum * wxrhjk.pageSize
            )
          "
          stripe
          :height="tableHeight"
          style="width: 100%"
          @cell-click="getDagInfo($event, 1)"
        >
          <template v-for="item in wxrhjk.column">
            <el-table-column
              :key="item.key"
              :label="item.title"
              :prop="item.key"
              align="left"
              :width="item.width"
              :show-overflow-tooltip="true"
            />
          </template>
          <el-table-column
            label="状态"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }"
              >{{ getState(row.runningStatus * 1) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="{ row }">
              <el-button
                type="success"
                size="mini"
                v-throttle="1"
                @click.native.stop="taskRun(row)"
                >重跑实例</el-button
              >
              <!-- <el-button
                type="success"
                size="mini"
                v-throttle="1"
                @click.native.stop="relyTaskRun(row)"
                >重跑当前及依赖实例</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="wxrhjk.total"
          :page.sync="wxrhjk.pageNum"
          :limit.sync="wxrhjk.pageSize"
          :loading="wxrhjk.loading"
        />
      </div>
      <div
        v-if="dialogTable === 'dagList'"
        class="dagbox"
        :style="{ height: boxHeight1 }"
      >
        <v-dag2 :mockData="mockData2" :isShow="true" />
        <div
          class="menu"
          v-show="isShowMenu"
          :style="{ left: devInfo.left, top: devInfo.top }"
        >
          <ul>
            <li @click="handleChart">节点历史运行</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <transition name="slide-fade">
          <div class="chartDate" v-if="isChartShow">
            <Title
              class="titlemg"
              :title="'节点历史运行'"
              :isIconShow="false"
            />
            <div
              class="close el-icon-arrow-down"
              @click="isChartShow = false"
            ></div>
            <div class="mg12">
              <chart
                style="width: 100%; height: 420px"
                :chart-data="lineChartData"
                :loading="loading"
              />
            </div>
          </div>
        </transition>
      </div>
    </el-dialog>
    <!-- 状态弹窗 -->
    <!-- 主流明细弹窗 -->
    <el-dialog
      :title="mainStreamDetailTitle + '_主流明细'"
      :visible.sync="isShowmainStream"
      width="80%"
      @close="handleClose"
    >
      <el-form
        :model="fromDate3"
        ref="fromDate3"
        size="small"
        :inline="true"
        class="bg32"
      >
        <el-form-item label="任务名称:" prop="taskName">
          <el-input
            placeholder="请输入任务名称"
            v-model="fromDate3.taskName"
            @input="handleQuery2"
            clearable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div>
        <el-table
          v-loading="wxrhjk.loading"
          :data="
            mainStreamDetail.data.slice(
              (mainStreamDetail.pageNum - 1) * mainStreamDetail.pageSize,
              mainStreamDetail.pageNum * mainStreamDetail.pageSize
            )
          "
          stripe
          :height="tableHeight"
          @cell-click="getDagInfo($event, 2)"
          style="width: 100%"
        >
          <!-- @cell-click="getDagInfo" -->
          <template v-for="item in wxrhjk.column">
            <el-table-column
              :key="item.key"
              :label="item.title"
              :prop="item.key"
              align="left"
              :width="item.width"
              :show-overflow-tooltip="true"
            />
          </template>
          <el-table-column
            label="状态"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }"
              >{{ getState(row.runningStatus * 1) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="{ row }">
              <el-button
                type="success"
                size="mini"
                v-throttle="1"
                @click.native.stop="taskRun(row)"
                >重跑实例</el-button
              >
              <!-- <el-button
                type="success"
                size="mini"
                v-throttle="1"
                @click.native.stop="relyTaskRun(row)"
                >重跑当前及依赖实例</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="mainStreamDetail.total"
          :page.sync="mainStreamDetail.pageNum"
          :limit.sync="mainStreamDetail.pageSize"
          :loading="mainStreamDetail.loading"
        />
      </div>
    </el-dialog>
    <!-- 主流明细dag弹窗 -->
    <el-dialog
      :title="mainStreamDetailTitle + '_主流明细'"
      :visible.sync="isShowDialog"
      width="80%"
    >
      <div class="dagbox" :style="{ height: boxHeight1 }">
        <v-dag2 :mockData="mockData2" :isShow="true" />
        <div
          class="menu"
          v-show="isShowMenu"
          :style="{ left: devInfo.left, top: devInfo.top }"
        >
          <ul>
            <li @click="handleChart">节点历史运行</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <transition name="slide-fade">
          <div class="chartDate" v-if="isChartShow">
            <Title
              class="titlemg"
              :title="'节点历史运行'"
              :isIconShow="false"
            />
            <div
              class="close el-icon-arrow-down"
              @click="isChartShow = false"
            ></div>
            <div class="mg12">
              <chart
                style="width: 100%; height: 420px"
                :chart-data="lineChartData"
                :loading="loading"
              />
            </div>
          </div>
        </transition>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import DAG from "./DAG3/Dag";
import DAG2 from "./DAG2/DAG";
// import {
//   getProjectList,
//   getWxrhDagDomains,
//   getWxrhDagStream,
//   getTasklist,
//   getTasklistChildren,
//   getTaskruninfos,
//   getTaskRun,
//   getTaskRunInfosDetail,
//   geChartHistoryRunInfos,
//   dagInfoHistory,
// } from "@/api/hk/wxrhjk";
export default {
  name: "wxrhjk",
  components: {
    "v-dag": DAG,
    "v-dag2": DAG2,
  },

  data() {
    return {
      tableHeight: document.body.clientHeight - 386,
      boxHeight: document.body.clientHeight - 91 + "px",
      boxHeight1: document.body.clientHeight - 150 + "px",
      // 第一个dag
      //   mockData: {
      //     // DAG图数据
      //     nodes: [],
      //     edges: [],
      //   },
      mockData: {
        nodes: {
          children: [],
        },
        edges: [],
        codeNum: 0,
      },
      //第二个dag
      mockData2: {
        // 弹框DAG图数据
        nodes: [],
        edges: [],
      },
      wxrhjk: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        column: [
          {
            title: "任务名称",
            key: "taskName",
            align: "left",
            width: 360,
          },
          {
            title: "taskId",
            key: "taskId",
            align: "center",
          },
          {
            title: "开始时间",
            key: "startTime",
            align: "center",
          },

          {
            title: "结束时间",
            key: "endTime",
            align: "center",
          },
          {
            title: "运行时长 (秒)",
            key: "runningTime",
            align: "center",
            width: 120,
          },
        ],
        data: [],
        loading: false, //loading
        mainStreamId: "", //第二个节点的主流程id
      }, //表格数据
      mainStreamDetail: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        column: [
          {
            title: "任务名称",
            key: "taskName",
            align: "left",
            width: 360,
          },
          {
            title: "开始时间",
            key: "startTime",
            align: "center",
          },
          {
            title: "结束时间",
            key: "endTime",
            align: "center",
          },
          {
            title: "运行时长 (分钟)",
            key: "runningTime",
            align: "center",
            width: 120,
          },
        ],
        data: [],
        loading: false, //loading
        mainStreamId: "", //第二个节点的主流程id
      }, //主流明细表格数据
      dialogTitle: "", //弹窗title
      isDialogShow: false, //弹窗开关
      dialogTable: "wxrhjk", //显示哪一个组件
      parentFolderId: "", //父节点的id
      mainStreamId: "", //第二个节点的主流程id
      recordNodes: [], // 记录第一级，第二季节点数据
      recordEdges: [], // 记录第一级，第二季线条数据
      fullscreenLoading: false, //dag loading
      fromDate: {
        taskName: "", //任务名称
      },
      fromDate3: {
        taskName: "", //任务名称
      },
      formData1: {
        time: "", //时间
        streamId: "", //工作流
        projectCode: "99999", //领域
        // projectCode: "", //领域
        DagDomains: [], //领域接口返回的数据
        projectOption: [], //工作流返回的数据
      }, //搜索参数1
      nodeItem: {}, //点击节点的信息
      itemstate: {}, //点击节点的状态
      isShowSearch: false, //是否显示搜索条件
      isShowMenu: false, //是否显示右键菜单
      isShowRightMenu: false,
      dag2NodeInfo: {}, //第二个dag的节点信息
      isChartShow: false, //是否显示chart图
      ndoeTrendChartShow: false, //是否显示主页的chart图
      loading: false, //是否显示loading
      lineChartData: {}, //chart图
      devInfo: {
        left: "",
        top: "",
      }, //鼠标右击的位置
      chidlrenEdges: [], //其他的子节点的连接线
      dagNodeInfo: {}, //主页右键点击节点的信息
      isShowmainStream: false, //是否显示主流程明细弹窗
      mainStreamDetailTitle: "", //主流明细的主流名称
      isShowDialog: false, //是否显示明细dag弹框
    };
  },
  created() {
    this.formData1.time = this.daySart;
  },
  mounted() {
    //获取一级二级节点信息
    this.getProjectList();
    // 获取领域
    // this.getWxrhDagDomains();
    //30秒自动刷新一级二级节点  如果鼠标未移动则认为并未在操作中,则调用接口
    var count = 0;
    this.timeCount = setInterval(() => {
      if (count < 30) {
        count += 1;
      } else {
        count = 0;
        // this.getProjectList();
      }
    }, 1000);
    var div = document.querySelector(".app-container");
    div.onmouseover = function () {
      count = 0;
    };
  },
  computed: {
    //当前年月日
    daySart() {
      let date = new Date();
      // 获取当前月份
      let nowMonth = date.getMonth() + 1;
      // 获取当前是几号
      let strDate = date.getDate();
      let seperator = "-";
      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }
      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let nowDate =
        date.getFullYear() + seperator + nowMonth + seperator + strDate;
      return nowDate;
    },
  },
  watch: {
    // 监视弹框开关
    isDialogShow(newValue, oldValue) {
      if (newValue === false) {
        this.mockData2 = {
          nodes: [],
          edges: [],
        };
        this.isShowSearch = false; //销毁搜索框
      }
      this.dialogTable = "wxrhjk";
      this.fromDate.taskName = ""; //关闭表格清空弹框中的搜索信息
    },
    isShowDialog(newValue, oldValue) {
      if (newValue === false) {
        this.mockData2 = {
          nodes: [],
          edges: [],
        };
      }
    },
    //显示组件切换
    dialogTable(newValue) {
      if (newValue === "wxrhjk") {
        this.isDialogShow = true;
      }
      //如果是dialogTable===wxrhjk   并且满足isShowSe 则显示搜索框
      if (newValue === "wxrhjk" && this.isShowSe) {
        this.isShowSearch = true; //显示搜索框
      }
    },
  },
  methods: {
    handleClose() {
      this.isShowmainStream = false;
      this.mainStreamDetail.pageNum = 1;
    },
    //获取主流明细
    async mainStreamDetails() {
      this.wxrhjk.mainStreamId = Number(this.dagNodeInfo.options.mainStreamId);
      let params = {
        dagRunDay: this.formData1.time,
        mainStreamId: Number(this.dagNodeInfo.options.mainStreamId),
        taskName: this.fromDate3.taskName,
      };
      let result = await getTaskRunInfosDetail(params);
      this.isShowmainStream = true;
      this.mainStreamDetail.data = result;
      this.mainStreamDetail.total = result.length;
    },
    // 主流明细任务名称
    handleQuery2() {
      // 输入框防抖
      clearTimeout(this.timer); // 每次进来的时候都将之前的清除掉，如果还没到一秒的时候就将之前的清除掉
      this.timer = setTimeout(() => {
        this.mainStreamDetails();
      }, 1000);
    },
    //获取工作流
    async handleStreamId(v) {
      if (v !== "99999") {
        this.formData1.streamId = "";
        let result = await getWxrhDagStream(v);
        this.formData1.projectOption = result;
        this.formData1.streamId = this.formData1.projectOption[0].streamId;
      } else {
        this.formData1.projectOption = [];
        this.formData1.streamId = "";
      }
    },
    //获取领域
    async getWxrhDagDomains() {
      let result = await getWxrhDagDomains(2);
      this.formData1.DagDomains = result;
    },
    // 节点运行趋势chart图
    async ndoeTrend() {
      this.ndoeTrendChartShow = true;
      let params = {
        dagId: this.dagNodeInfo.options.mainStreamId,
        startDay: this.formData1.time,
        // dagId: 1505,
        // startDay: "2022-06-08",
      };
      this.loading = true;
      let result = await dagInfoHistory(params);
      this.loading = false;
      let data = result.map((item) => item.time);
      let xAxis = result.map((item) => item.day);
      let name = result[0]?.name || "";
      this.lineChartData = {
        legend: {
          right: 0,
        },
        grid: {
          left: 60,
          right: 110,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        xAxis: {
          data: xAxis,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "数据量(分钟)",
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0.45)",
              },
            },
          },
        ],

        series: [
          {
            name: name,
            itemStyle: {
              normal: {
                color: "#0F8EE9",
                lineStyle: {
                  color: "#0F8EE9",
                  width: 2,
                },
              },
            },
            data: data,
            markLine: {
              label: {
                formatter: "{b}: {c}",
                position: "middle",
              },
              data: [{ type: "average", name: "平均耗时(分钟)" }],
            },
            label: { show: true },

            smooth: true,
            type: "line",
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      };
    },
    //显示节点历史运行chart图
    async handleChart() {
      this.isChartShow = true;
      let params = {
        startDay: this.formData1.time,
        taskId: this.dag2NodeInfo.taskId,
        // taskId: 1456,
        // startDay: "2022-06-08",
      };
      this.loading = true;
      let result = await geChartHistoryRunInfos(params);
      this.loading = false;
      let data = result.map((item) => item.time);
      let xAxis = result.map((item) => item.day);
      let name = result[0]?.name || "";
      this.lineChartData = {
        legend: {
          right: 0,
        },
        grid: {
          left: 60,
          right: 100,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        xAxis: {
          data: xAxis,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "数据量(秒)",
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0.45)",
              },
            },
          },
        ],
        series: [
          {
            name: name,
            itemStyle: {
              normal: {
                color: "#0F8EE9",
                lineStyle: {
                  color: "#0F8EE9",
                  width: 2,
                },
                label: { show: true },
              },
            },
            data: data,
            markLine: {
              label: {
                formatter: "{b}: {c}",
                position: "middle",
              },
              data: [{ type: "average", name: "平均耗时(秒)" }],
            },
            smooth: true,
            type: "line",
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      };
    },
    //弹框中的dag右键点击事件
    rightClick(e, item, isShowMenu) {
      this.isShowMenu = isShowMenu;
      this.devInfo.left = e.pageX + "px";
      this.devInfo.top = e.pageY + "px";
      this.dag2NodeInfo = item;
    },
    // 搜索任务名称
    handleQuery() {
      // 输入框防抖
      clearTimeout(this.timer); // 每次进来的时候都将之前的清除掉，如果还没到一秒的时候就将之前的清除掉
      this.timer = setTimeout(() => {
        let params = {
          ...this.nodeItem,
          taskName: this.fromDate.taskName,
        };
        this.getTaskRunInfosDetail(params, this.itemstate);
      }, 1000);
    },
    //表单搜索
    handleSearch() {
      this.mockData.nodes.children = [];
      this.mockData.edges = [];
      if (
        this.formData1.projectCode !== "99999" &&
        this.formData1.streamId == ""
      ) {
        this.$message.error("请选择工作流");
        return;
      }
      this.getProjectList();
    },
    //时间重置
    resetQuery1() {
      this.formData1.time = this.daySart;
      this.formData1.projectCode = "99999";
      // this.formData1.projectCode = "";
      this.formData1.projectOption = [];
      this.formData1.streamId = "";
      this.getProjectList();
    },
    //主页的dag 右键点击事件
    dagRightClick(e, item, isShowMenu) {
      this.mainStreamDetailTitle = item.options.title;
      this.isShowRightMenu = isShowMenu;
      this.devInfo.left = e.pageX + "px";
      this.devInfo.top = e.pageY + "px";
      this.dagNodeInfo = item;
    },
    //获取一级和二级的节点信息
    async getProjectList() {
      let params = {
        dagRunDay: this.formData1.time,
        streamId: this.formData1.streamId,
      };
      // this.fullscreenLoading = true;

      // let data1 = await getProjectList(params);
      let data1 = [
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55fa5b",
          projectName: "内审",
          rowNum: 1,
          mainStreamId: 621,
          mainStreamName: "审计_主流",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad5a",
          projectName: "机器人",
          rowNum: 1,
          mainStreamId: 1469,
          mainStreamName: "机器人_主流_每日",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55faab",
          projectName: "国际营销",
          rowNum: 1,
          mainStreamId: 38,
          mainStreamName: "国际营销_主流_每日",
          taskStateMap: null,
          startTime: "",
          endTime: "",
          runTime: "",
          colorState: 4,
        },
        {
          projectCode: "1212",
          projectName: "智慧消防",
          rowNum: 1,
          mainStreamId: 851,
          mainStreamName: "智慧消防_主流_每日",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "1234",
          projectName: "汽车电子",
          rowNum: 1,
          mainStreamId: 1155,
          mainStreamName: "汽车电子_主流_每日",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55faaa",
          projectName: "国内营销",
          rowNum: 1,
          mainStreamId: 206,
          mainStreamName: "国内营销主流",
          taskStateMap: { "-1": 1, 5: 4, 6: 5, 7: 3, 20: 1 },
          startTime: "2022-11-10 00:27:29",
          endTime: "2022-12-13 00:27:29",
          runTime: "483",
          colorState: 2,
        },
        {
          projectCode: "1211",
          projectName: "新业务财务",
          rowNum: 1,
          mainStreamId: 278,
          mainStreamName: "新业务财务_主流_每日",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "1210",
          projectName: "综合",
          rowNum: 1,
          mainStreamId: 997,
          mainStreamName: "综合_主流_每日",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55fabf",
          projectName: "微影",
          rowNum: 1,
          mainStreamId: 894,
          mainStreamName: "微影_主流",
          taskStateMap: { "-1": 1, 6: 3, 7: 3 },
          startTime: "2022-11-10 00:27:29",
          endTime: "2022-12-13 00:27:29",
          runTime: "483",
          colorState: 2,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55fac7",
          projectName: "财务",
          rowNum: 1,
          mainStreamId: 563,
          mainStreamName: "财务_主流",
          taskStateMap: { "-1": 1, 6: 3, 7: 3 },
          startTime: "2022-11-10 00:27:29",
          endTime: "2022-12-13 00:27:29",
          runTime: "483",
          colorState: 2,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55fd78",
          projectName: "技术与服务",
          rowNum: 1,
          mainStreamId: 245,
          mainStreamName: "每天1点_技术服务",
          taskStateMap: null,
          startTime: null,
          endTime: null,
          runTime: null,
          colorState: 4,
        },
        {
          projectCode: "e639c75727f94d4ebb6ad56d0c55faac",
          projectName: "智慧存储",
          rowNum: 1,
          mainStreamId: 351,
          mainStreamName: "智慧存储_主流_每日",
          taskStateMap: { "-1": 1, 6: 3, 7: 3 },
          startTime: "2022-11-10 00:27:29",
          endTime: "2022-12-13 00:27:29",
          runTime: "483",
          colorState: 2,
        },
      ];
      // this.fullscreenLoading = false;

      // 123级节点数据
      let firstNodes = data1.map((item) => {
        let node = {
          title: item.mainStreamName,
          content: item.taskStateMap,
          conistudy: false, //判断为二级节点
          istwo: true,
          startTime: item.startTime,
          endTime: item.endTime,
          runTime: item.runTime,
          id: item.mainStreamId.toString() + item.mainStreamName,
          mainStreamId: item.mainStreamId.toString(),
          endpoints: [
            {
              id: item.mainStreamId.toString() + item.mainStreamName,
            },
          ],
          children: [],
        };
        return node;
      });
      //根节点的线
      let rootEdges = data1.map((item) => {
        return {
          source: "root_conistudy_jiedian",
          target: item.mainStreamId.toString() + item.mainStreamName,
          sourceNode: "root_conistudy_jiedian",
          targetNode: item.mainStreamId.toString() + item.mainStreamName,
          type: "endpoint",
        };
      });
      //其他节点的线
      let otherParentEdges = [];
      // 其他子节点的线
      let otherChildrenEdges = [];
      data1.forEach((item) => {
        //如果有nonMainStramList 并且长度大于0
        if (item.nonMainStramList && item.nonMainStramList.length > 0) {
          let p = {
            source: item.projectCode.toString(),
            target: `9${item.projectCode}`,
            sourceNode: item.projectCode.toString(),
            targetNode: `9${item.projectCode}`,
            type: "endpoint",
          };
          //其他节点的线
          otherParentEdges.push(p);
          item.nonMainStramList.forEach((element) => {
            let params = {
              source: `9${item.projectCode}`,
              target: element.streamId.toString(),
              sourceNode: `9${item.projectCode}`,
              targetNode: element.streamId.toString(),
              type: "endpoint",
            };
            this.chidlrenEdges.push(params);
          });
          otherChildrenEdges = [...this.chidlrenEdges];
        }
      });
      // 合并线和节点
      this.mockData = {
        nodes: { children: [...firstNodes] },
        edges: new Set([
          ...rootEdges,
          ...otherParentEdges,
          ...otherChildrenEdges,
        ]),
        codeNum: 0,
      };
    },
    //点击节点获取信息
    async getTasklist(id, item) {
      this.isShowSe = false; //记录点击节点的时候 关闭搜索框
      // let mainStreamId = item.options.mainStreamId;
      //如果isLeaf时候需要弹窗表格进行显示
      if (item && item.options.isLeaf === true) {
        this.wxrhjk.mainStreamId = item.options.mainStreamId;
        this.wxrhjk.data = item.options.taskRunInfos;
        this.wxrhjk.total = item.options.taskRunInfos.length;
        this.dialogTitle = item.options.title;
        this.isDialogShow = true;
      } else if (
        item.options.conistudy == false &&
        item.options.istwo == true
      ) {
        //如果父级id为null则认为是二级节点,可根据folderId调用接口
        // !this.mainStreamId 第一次点击二级节点
        // this.mainStreamId && this.mainStreamId !== item.mainStreamId  不属于第一次点击二级节点 && 二级节点mainStreamId值和当前点击项mainStreamId值不一致
        let mainStreamId = "";
        if (
          !mainStreamId ||
          (mainStreamId && mainStreamId !== item.options.mainStreamId)
        ) {
          mainStreamId = item.options.mainStreamId;
          this.parentId = item.options.parentFolderId;
          this.fullscreenLoading = true;
          let data2 = await getTasklist(
            item.options.mainStreamId,
            this.formData1.time
          );
          this.fullscreenLoading = false;
          let data2Edges = [];
          // 三级 三级以上节点数据
          let nodes = data2.map((ele) => {
            let params = {
              source: id,
              target: `${ele.folderId}${item.options.mainStreamId}`,
              sourceNode: id,
              targetNode: `${ele.folderId}${item.options.mainStreamId}`,
              type: "endpoint",
            };
            data2Edges.push(params);
            return {
              title: ele.folderName,
              id: `${ele.folderId}${item.options.mainStreamId}`,
              parentFolderId: ele.parentFolderId,
              content: ele.taskStateMap,
              folderId: ele.folderId,
              conistudy: false,
              isLeaf: ele.isLeaf,
              taskRunInfos: ele.taskRunInfos,
              mainStreamId: item.options.mainStreamId,
              startTime: ele.startTime,
              endTime: ele.endTime,
              runTime: ele.runTime,
              endpoints: [
                {
                  id: `${ele.folderId}${item.options.mainStreamId}`,
                },
              ],
            };
          });
          // 三级及以上的线
          // this.mockData.edges = [...this.mockData.edges, ...data2Edges];
          this.mockData.edges = new Set([
            ...this.mockData.edges,
            ...data2Edges,
          ]);
          // 三级及以上的点
          this.addNOdeChildren(this.mockData.nodes.children, id, nodes);
          //解决递归添加修改属性watch监听不到
          this.mockData.codeNum++;
        }
      } else {
        //如果父节点parentFolderId有数据则调用getTasklistChildren获取节点信息
        this.fullscreenLoading = true;
        let data3 = await getTasklistChildren(
          item.options.mainStreamId,
          item.options.folderId,
          this.formData1.time
        );
        this.fullscreenLoading = false;
        // 判断显示表格还是弹窗需要看isleaf是true还是false
        if (data3[0].isLeaf === true) {
          this.getDagLists(data3[0], item.options.mainStreamId);
        } else {
          let data3Edges = [];
          // 4级 4级以上节点数据
          let nodes = data3.map((ele) => {
            let params = {
              source: item.id,
              target: `${ele.folderId}${item.options.mainStreamId}`,
              sourceNode: item.id,
              targetNode: `${ele.folderId}${item.options.mainStreamId}`,
              type: "endpoint",
            };
            data3Edges.push(params);
            return {
              title: ele.folderName,
              id: `${ele.folderId}${item.options.mainStreamId}`,
              parentFolderId: ele.parentFolderId,
              content: ele.taskStateMap,
              folderId: ele.folderId,
              conistudy: true,
              isLeaf: ele.isLeaf,
              startTime: ele.startTime,
              endTime: ele.endTime,
              runTime: ele.runTime,
              taskRunInfos: ele.taskRunInfos,
              mainStreamId: item.options.mainStreamId,
              endpoints: [
                {
                  id: `${ele.folderId}${item.options.mainStreamId}`,
                },
              ],
            };
          });
          //4级 4级以上节点数据
          this.addNOdeChildren(this.mockData.nodes.children, id, nodes);
          //4级 4级以上节点线的相关数据
          // this.mockData.edges = [...this.mockData.edges, ...data3Edges];
          this.mockData.edges = new Set([
            ...this.mockData.edges,
            ...data3Edges,
          ]);
          //解决递归添加修改属性watch监听不到
          this.mockData.codeNum++;
        }
      }
    },
    //点击单元格触发获取dag
    async getDagInfo(e, num) {
      if (e.taskId) {
        let result = await getTaskruninfos(
          this.wxrhjk.mainStreamId,
          e.taskId * 1,
          this.formData1.time
        );
        let length = JSON.parse(result.taskLink).length;
        if (length <= 0) {
          this.$message.warning("暂无数据");
        } else {
          let edges = JSON.parse(result.taskLink).map((item, index) => {
            return {
              source: item.t1.toString(),
              target: item.t2.toString(),
            };
          });
          let nodes = result.taskStateMap.map((item) => {
            return {
              name: item.name,
              id: item.taskId.toString(),
              taskId: item.taskId.toString(),
              state: item.state.toString(),
              stateNum: "88888",
              clickId: e.taskId,
            };
          });

          // nodes节点去重
          const removeNodesObj = (arr) => {
            let obj = {};
            arr = arr.reduce((newArr, next) => {
              next.clickId = e.taskId;
              obj[next.taskId]
                ? ""
                : (obj[next.taskId] = true && newArr.push(next));
              return newArr;
            }, []);
            return arr;
          };
          // edges节点去重
          const removeEdgesObj = (arr) => {
            let obj = {};
            arr = arr.reduce((newArr, next) => {
              next.clickId = e.taskId;
              if (obj[`${next.source}${next.target}`]) {
              } else {
                obj[`${next.source}${next.target}`] = true;
                newArr.push(next);
              }
              return newArr;
            }, []);
            return arr;
          };

          this.mockData2.nodes = removeNodesObj([
            ...this.mockData2.nodes,
            ...nodes,
          ]);
          this.mockData2.edges = removeEdgesObj([
            ...this.mockData2.edges,
            ...edges,
          ]);
          if (num === 1) {
            this.dialogTable = "dagList";
          } else if (num === 2) {
            this.isShowDialog = true;
          }
        }
      }
      this.isShowSearch = false; //销毁搜索框
    },
    //情况2isleaf是true 弹出列表
    getDagLists(e, mainStreamId) {
      this.isShowSearch = false; //销毁搜索框
      this.wxrhjk.mainStreamId = mainStreamId;
      this.wxrhjk.data = e.taskRunInfos;
      this.wxrhjk.total = e.taskRunInfos.length;
      this.dialogTitle = e.folderName;
      this.isDialogShow = true;
    },
    //弹窗dag 点击节点触发事件
    getMoreDagList(e) {
      if (e.name !== "结束" && e.name !== "开始") {
        this.getDagInfo(e);
      }
    },
    //转换状态
    getState(code) {
      switch (code) {
        case -1:
          return "未提交";
        case 0:
          return "提交成功";
        case 1:
          return "正在运行";
        case 2:
          return "准备暂停";
        case 3:
          return "暂停";
        case 4:
          return "准备停止";
        case 5:
          return "停止";
        case 6:
          return "运行失败";
        case 7:
          return "运行成功";
        case 8:
          return "未知错误";
        case 9:
          return "忽略";
      }
    },
    //重跑实例
    taskRun(row) {
      this.$confirm("确定重跑该任务实例吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            // sign: "single",
            taskInstanceIds: [row.id],
          };
          getTaskRun(params).then((res) => {
            if (res.code === "0") {
              this.$modal.msgSuccess("重跑任务实例操作成功");
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    //重跑实例及依赖
    relyTaskRun(row) {
      this.$confirm("确定重跑该任务实例及其依赖实例吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            sign: "dependency",
            taskInstanceId: row.taskId,
          };
          getTaskRun(params).then((res) => {
            if (res.code === "0") {
              this.$modal.msgSuccess("重跑任务实例及其依赖实例操作成功");
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    //点击dag状态及数量弹窗
    showDialogData(data, itemstate, mainStreamId) {
      this.isShowSearch = true; //显示搜索框
      this.isShowSe = true; //记录显示搜索框
      this.wxrhjk.mainStreamId = mainStreamId;
      this.wxrhjk.data = data;
      this.wxrhjk.total = data.length;
      this.isDialogShow = true;
      this.dialogTitle = this.getState(Number(itemstate));
    },
    //点击dag状态及数量调用接口
    getTaskRunInfosDetail(item, itemstate) {
      this.nodeItem = item;
      this.itemstate = itemstate;
      //item是点击当前节点的信息,itemstate是点击当前节点其中一个的状态
      let params = null;
      if (item.istwo) {
        params = {
          dagRunDay: this.formData1.time,
          mainStreamId: Number(item.mainStreamId),
          state: itemstate,
          taskName: item.taskName ? item.taskName : "",
        };
      } else {
        params = {
          dagRunDay: this.formData1.time,
          folderId: Number(item.folderId),
          mainStreamId: Number(item.mainStreamId),
          state: itemstate,
          taskName: item.taskName ? item.taskName : "",
        };
      }
      getTaskRunInfosDetail(params).then((res) => {
        this.showDialogData(res, itemstate, item.mainStreamId);
      });
    },
    //查询id所在的节点并添加children
    addNOdeChildren(list, id, children) {
      if (!list instanceof Array) return null;
      list.map((item, index) => {
        if (item.id === id) {
          item.children = [...children];
          return item;
        } else {
          if (item.children) {
            let obj = this.addNOdeChildren(item.children, id, children);
            if (obj) return obj;
          }
        }
      });
    },
  },
  // 生命周期钩子,组件销毁之前,清除定时器
  beforeDestroy() {
    clearInterval(this.timeCount);
  },
};
</script>

  <style scoped lang="scss">
.slide-fade-enter-active {
  animation: slide-in-bottom 0.8s both;
}
.slide-fade-leave-active {
  animation: slide-out-bottom 0.8s both;
}
.realtime {
  padding: 0;
  position: relative;
}
.dagbox {
  width: 100%;
  background: #fff;
  position: relative;
}
.menu {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: pink;
  position: fixed;
  z-index: 999;
  ul {
    width: 100px;
    li {
      list-style-type: none;
      margin-left: -40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      &:hover {
        background-color: skyblue;
      }
    }
  }
}
.chartDate {
  width: 100%;
  height: 500px;
  padding: 0 20px;
  background-color: #fff;
  z-index: 999;
  position: absolute;
  left: 0;
  bottom: 0;
  border: 5px solid #ccc;
  border-radius: 10px;
  // animation: fadenum 1s 1;

  .titlemg {
    margin: 24px 12px 12px;
    font-size: 24px;
  }
  .mg12 {
    width: 100%;
    margin: 12px;
  }
  .close {
    width: 60px;
    height: 30px;
    text-align: center;
    font-size: 24px;
    background-color: #ccc;
    position: absolute;
    left: 45%;
    top: 0;
    border-radius: 0 0 10px 10px;
    // animation: fadenum 0.5s 1;
  }

  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
    }
  }
}
</style>
